<template>
  <div class="con">
    <v-chart
      :options="option"
      :auto-resize="true"
      @click="chartClick"
    />
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
@Component
export default class barchart extends Vue {
  @Prop() chartData!: any;
  public option: EChartOption = {
    color: ["RGBA(224, 155, 15, 1)", "RGBA(51, 154, 247, 1)"],
    legend: {
      show: true,
      orient: "vertical",
      right: "5%",
      bottom: "10%",
      itemGap: 15,
      itemWidth: 11,
      itemHeight: 11,
      textStyle: {
        color: "#fff",
      },
    },
    series: [
      {
        type: "pie",
        radius: ["0", "55%"],
        selectedMode: "single",
        selectedOffset: 15,
        labelLine: {
          normal: {
            length: 25,
            length2: 15,
          },
        },
        label: {
          normal: {
            formatter: (params: { percent: string }) => {
              return "{a|" + params.percent + "%}";
            },
            rich: {
              a: {
                color: "#ffffff",
                fontSize: 14,
                height: 16,
                align: "center",
              },
            },
          },
        },
        data: [
          {
            name: "告警",
            value: 100,
            selected: true,
            itemStyle: {
              borderWidth: 3,
              shadowBlur: 10,
              borderColor: "RGBA(224, 155, 15, 1)",
              shadowColor: "RGBA(224, 155, 15, 1)",
            },
          },
          {
            name: "正常",
            value: 300,
            itemStyle: {
              borderWidth: 3,
              shadowBlur: 10,
              borderColor: "RGBA(51, 154, 247, 1)",
              shadowColor: "RGBA(51, 154, 247, 1)",
            },
          },
        ],
      },
    ],
  };
  public chartClick(val: Object): void {
    // console.log(val);
  }
  @Watch("chartData", { immediate: true, deep: true })
  getBarData(newVal: any) {
    // console.log("newVal", newVal);
    (this as any).option.series[0].data[0].value = newVal.alarmNumber;
    (this as any).option.series[0].data[1].value = newVal.numberNormal;
  }
  mounted(): void {
    this.getBarData;
  }
}
</script>
<style lang="scss" scoped>
.con {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
